<template>
  <view class="detail-bottom">
    <view class="detail-bottom-input" @click="openChat">
      <text>评论一下，交个朋友~</text>
      <uni-icons type="compose" size="16" color="#fa541c"></uni-icons>
    </view>
    <view class="detail-bottom-icons">
      <view class="detail-bottom-icons-box">
        <uni-icons v-if="!isAdmired" type="heart" size="22" color="#fa541c"></uni-icons>
        <uni-icons v-else type="heart-filled" size="22" color="#fa541c"></uni-icons>
      </view>
    </view>
    <uni-popup ref="textPop" type="bottom">
      <view class="popup-wrap">
        <view class="popup-header">
          <text class="popup-header-item" @click="handleCancel">取消</text>
          <text class="popup-header-item" @click="handleSubmit">发布</text>
        </view>
        <view class="popup-content">
          <textarea class="popup-textarea" maxlength="200" v-model="commentValue" fixed placeholder="请输入评论内容"></textarea>
          <view class="popup-count">评论最大不超过200个字符</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {uniIcons, uniPopup} from '@dcloudio/uni-ui'
export default {
  name: 'detail-bottom',
  prop: [
    'commentValue', 'isAdmired'
  ],
  components: {
    uniIcons, uniPopup
	},
  methods: {
    openChat() {
		this.$refs.textPop.open()
	},
	handleSubmit() {
		console.log(this.commentValue)
	},
	handleCancel() {
		this.$refs.textPop.close()
	}
  }
}
</script>

<style lang='scss'>
  .detail-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    border-top: 1px #f5f5f5 solid;
    background-color: #ffffff;
    box-sizing: border-box;
    .detail-bottom-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 10px;
      padding: 0 10px;
      width: 100%;
      height: 30px;
      border: 1px #dddddd solid;
      border-radius: 5px;
      text {
        font-size: 14px;
        color: #999;
      }
    }
    .detail-bottom-icons {
      display: flex;
      flex-shrink: 0;
      padding: 0 10px;
      .detail-bottom-icons-box {
        position: relative;
        display: flex;
        align-items: center;
        width: 44px;
        justify-content: center;
      }
    }
  .popup-wrap {
    background-color: #ffffff;
    .popup-header {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      border-bottom: 1px #f5f5f5 solid;
      .popup-header-item {
        height: 50px;
        line-height: 50px;
        padding: 0 15px;

      }
    }
    .popup-content {
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
      .popup-textarea {
        width: 100%;
        height: 200px;
      }
    .popup-count {
      display: flex;
      justify-content: flex-end;
      color: #999;
      font-size: 12px;
    }
  }
  }
}
  /* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
</style>
